class Index {
  constructor() {
    // this.getGoods();
    this.ajax();
  }
  ajax() {
    // 1 调用ajax发送数据
    let xhr = new XMLHttpRequest();
    xhr.open('post', './data/index.php');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send();
    // 2 接收结果进行提示
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let str = xhr.responseText;
        str = JSON.parse(str);
        this.getGoods(str.data);
        // console.log(str);
      }
    }
  }
  /**********渲染页面的数据*******/
  // 需求:页面加载进来,就要渲染数据
  getGoods(data) {
    let str = '';
    data.forEach(ele => {
      // console.log(ele);
      //1 获取对象中的name,img,price等数据
      let {
        id,
        img,
        price,
        name
      } = ele;
      // 2 拼接到html中
      str += `<a href="proDetail.html">
      <dl><dt><span class="abl"></span><img src="${img}" />
      <span class="abr"></span></dt><dd>${name}</dd>
      <dd><span>￥${price}</span></dd></dl></a>`;
    }); 
    // console.log(str,$('.pList'));
    // 3 将拼接的数据追加到页面中
    $('.pList').html(str);
  }
}
let indexData = new Index();
// let str = decodeURIComponent(window.location.search);
//     str = str.substr(1);
//     const arr = str.split('=');
//     getAjax(1);

//     function getAjax(page) {
//       $.ajax({
//         url: './data/index.php',
//         type: 'post',
//         data: {
//           id: arr[1],
//           page: page,
//           line: 8
//         },
//         dataType: 'json',
//         success: function (res) {
//           console.log(res);
//           let str = '';
//           res.data.forEach(function (res) {
//             let {
//               id,
//               img,
//               price,
//               name
//             } = res;
//             // console.log(img);
//             str += `<a href="proDetail.html">
//               <dl><dt><span class="abl"></span><img src="${img}" />
//               <span class="abr"></span></dt><dd>${name}</dd>
//               <dd><span>￥${price}</span></dd></dl>
//             </a>`;
//           });
//           console.log(res.data.length);
//           $('.pList').html(str);
//           $('.M-box').pagination({
//             coping: true,
//             pageCount: res.data.length, // 总页数
//             totalData: res.data.length*4, // 数据总条数
//             // current: res.data.page, // 当前第几页
//             activeCls: 'active', // 当前页选中状态class名
//             showData: 8,
//             homePage: '首页',
//             endPage: '末页',
//             prevContent: '上页',
//             nextContent: '下页',
//             mode: 'fixed',
//             callback: function (api) {
//               let p = api.getCurrent();
//               getAjax(p);
//             }
//           });
//         }
//       });
//     }